<!--
 查询条件格式类型：
 - 输入框：
 - 下拉框：单选下拉框，多选下拉框，固定下拉框，搜索下拉框，远程搜索下拉框
 - 日期框：单时间，范围时间，单日期，范围日期

 formList具体格式：
  key: form绑定的key值。
  defaultValue: 默认值。
  type: formItem类型，有text-输入框文本，select-单选下拉框，mSelect-多选下拉框，rSelect-远程搜索下拉框，time-单时间，
        rTime-范围时间，date-单日期，rDate-范围日期，radio-单选框。
  list: 下拉选项。
  label: label名。
  placeholder: 提示信息。
  isShow: 是否显示。
 -->
<template>
  <div class="condition">
    <el-form ref="form" :inline="true" :model="form" class="form" :style="{gridTemplateColumns: `repeat(${cols}, ${100/cols}%)`}" :size="size" :label-width="labelWidth">
      <template v-for="(item, index) in formList">
        <el-form-item :label="item.label" :prop="item.key">
          <!-- 文本输入框 -->
          <el-input v-if="item.type === 'text'" v-show="item.isShow" class="width100" v-model="form[item.key]" :placeholder="item.placeholder"></el-input>
          <!-- 单选下拉框 -->
          <el-select v-else-if="item.type === 'select'" v-show="item.isShow" class="width100"  v-model="form[item.key]" :placeholder="item.placeholder" clearable>
            <el-option v-for="li in item.list" :label="li.label" :value="li.value"></el-option>
          </el-select>
          <!-- 多选下拉框 -->
          <el-select v-else-if="item.type === 'mSelect'" v-show="item.isShow" class="width100"  v-model="form[item.key]" :placeholder="item.placeholder" multiple collapse-tags>
            <el-option v-for="li in item.list" :label="li.label" :value="li.value"></el-option>
          </el-select>
          <!-- 单时间 -->
          <el-time-select v-else-if="item.type === 'time'" v-show="item.isShow" class="width100" v-model="form[item.key]" :placeholder="item.placeholder"></el-time-select>
          <!-- 范围时间 -->
          <el-time-picker v-else-if="item.type === 'rTime'" v-show="item.isShow" class="width100" is-range v-model="form[item.key]" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :placeholder="item.placeholder"></el-time-picker>
          <!-- 单日期 -->
          <el-date-picker v-else-if="item.type === 'date'" v-show="item.isShow" class="width100" v-model="form[item.key]" type="date" :placeholder="item.placeholder"></el-date-picker>
          <!-- 范围日期 -->
          <el-date-picker v-else-if="item.type === 'rDate'" v-show="item.isShow" class="width100" v-model="form[item.key]" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :placeholder="item.placeholder"></el-date-picker>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" :size="size" @click="handlerSubmit">查询</el-button>
        <el-button type="ghost" :size="size" @click="resetForm">重置</el-button>
        <i class="el-icon-d-arrow-right" :style="{transform: isShowAllCondition ? 'rotate(270deg)' : 'rotate(90deg)'}" @click="isShowAllCondition = !isShowAllCondition"></i>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "condition",
    props: {
      labelWidth: {
        type: String,
        default: '120px'
      },
      cols: {
        type: Number,
        default: 4
      },
      formList: {
        type: Array,
        default: []
      },
      size: {
        type: String,
        default: 'small' // medium / small / mini
      }
    },
    data() {
      return {
        isShowAllCondition: false,
        form: {}
      }
    },
    watch: {
      formList(val) {
        val.forEach(item => {
          // 生成form
          this.form[item.key] = item.defaultValue || ''
        });
      }
    },
    methods: {
      // 查询
      handlerSubmit() {
        this.$emit('query', this.form);
      },
      // 重置
      resetForm() {
        debugger;
        this.$refs.form.resetFields();
      }
    },
    mounted() {
      // js动态设置样式变量
      document.querySelector('body').style.setProperty('--query-form-label-width', this.labelWidth);
    }
  }
</script>

<style scoped lang="scss">

$query-form-label-width: var(--query-form-label-width);
.form{
  text-align: left;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  /deep/.el-form-item__content{
    width: calc(100% - var(--query-form-label-width));
  }
  .width100{
    width: 100%;
  }
  .el-icon-d-arrow-right{
    cursor: pointer;
    margin-left: 10px;
  }
}
</style>
